<!DOCTYPE html>
<html>
	<head>
		<title>图片展示 </title>
		<meta charset="utf-8"/>
		<style>
			body {
				margin: 0px;
				background-color: #FBF3E7;
			}
			a {
				text-decoration: none;
				color: #454545;
			}
			#test {
				margin: auto auto;
				width: 780px;
				height: auto;
				background-color: #D0C3C1;
			}
			.hoverCss {
			}
			.oncenter {
				margin: auto auto;
			}
			.smallImage {
				float: left;
				width: 150px;
				height: 200px;
				margin: 3px;
			}
			.smallImage2 {
			}
			.smallImage2 img {
				width: 150px;
				height: 200px;
			}
			.smallImage1 {
			}
			.smallImage1 img {
				width: 158px;
				height: 208px;
			}
			.headDivCss {
				background-image: url();
				with: 100%;
				height: 35px;
				background-color: transparent;
			}
			.headDivCss #leftDiv {
				float: left;
				width: 377px;
			}
			.headDivCss #leftDiv img {
				float: right;
			}
			.headDivCss #centerDiv {
				float: left;
				margin-left: 50px;
				width: 630px;
			}
			.headDivCss #rightDiv {
				text-align: left;
			}
			.headDivCss a {
				margin: 10px;
				font-size: 13px;
				line-height: 35px;
			}
			.readImg {
				width: 100%;
				height: 100%;
				background-color: #292929;
				opacity: .7;
				z-index: 9000;
				position: absolute;
				display: none;
			}
			.readImg img {
				max-width: 900;
				max-height: 600px;
			}
			#m_img{
				position: absolute;
				
				top: 300px;
				left: 400px;
				border:1px solid red;
				
			}
			#m_img img{max-height: 200px;}

		</style>
		<script src="js/jquery.js"></script>
		<script>
			var imageSize = 18;
			var imageArray = new Array(imageSize);
			
			$(document).ready(function() {
				var fx;
				var fy;
				var flag = false;
				var m_div = $("#m_img");
				m_div.mousemove(function(event) {
					if(flag) {
						var myEvent = event || window.event;
						;
						changeXY(m_div, myEvent);
					}
				});
				m_div.mouseup(function() {
					flag = false;
				});
				m_div.mouseout(function() {
					m_div.unbind("mousemove");
				})
				
				
				m_div.mousedown(function(event) {
					var t = $(this);
					var myEvent = event || window.event;
					fx = myEvent.clientX;
					fy = myEvent.clientY;
					t.mousemove(function(event) {
						var myEvent = event || window.event;
						changeXY(m_div, myEvent);
						flag = true;
					});
				})
				function changeXY(m_div, myEvent) {
					if(fx > myEvent.clientX) {
						var change_top_x = parseInt(m_div.css("left")) - (fx - myEvent.clientX);
						//测试是否超出左边窗口
						if(change_top_x < 5) {
							change_top_x = 5;
							//flag = false;
							// title.unbind("mousemove");
						}
						m_div.css("left", change_top_x + "px");
						fx = myEvent.clientX;
					}
					if(fx < myEvent.clientX) {
						var change_top_x = parseInt(m_div.css("left")) + (myEvent.clientX - fx);
						//测试是否超出窗口右边
						if(change_top_x > ($(window).width() - parseInt(m_div.css("width")) - 5)) {
							change_top_x = ($(window).width() - parseInt(m_div.css("width")) - 5);
							//flag = false;
							//title.unbind("mousemove");
						}
						m_div.css("left", change_top_x + "px");
						fx = myEvent.clientX;
					}
					if(fy > myEvent.clientY) {
						var change_top_y = parseInt(m_div.css("top")) - (fy - myEvent.clientY)
						//测试是否超出窗口顶部
						if(change_top_y < 5) {
							change_top_y = 5;
							// flag = false;
							// title.unbind("mousemove");
						}
						m_div.css("top", change_top_y + "px");
						fy = myEvent.clientY;
					}
					if(fy < myEvent.clientY) {
						var change_top_y = parseInt(m_div.css("top")) + (myEvent.clientY - fy);
						//测试是否超出窗口底部
						if(change_top_y > ($(window).height() - parseInt(m_div.css("height")) - 5)) {
							change_top_y = ($(window).height() - parseInt(m_div.css("height")) - 5);
							//flag = false;
							//title.unbind("mousemove");
						}
						m_div.css("top", change_top_y + "px");
						fy = myEvent.clientY;
					}
				}

				initial();
				
			});
			
			function initial() {
				//image.src="";

				for(var i = 1; i <= imageArray.length; i++) {

					var image = new Image();
					image.src = "image/" + i + ".jpg";
					image.id = "img" + i;
					//$(image).css({maxWith:"650px",maxHeight:"500px",display:"block"});
					var img = $("<div></div>").append($("<a target=\"_blank\"></a>").append(image)).addClass("smallImage smallImage2");
					$(img).hover(function() {
						$(this).removeClass("smallImage2");
						$(this).addClass("smallImage1");
					}, function() {
						$(this).removeClass("smallImage1");
						$(this).addClass("smallImage2");
					});
					$(image).click(function() {
						
						
						
						//$("m_img").append($(image).clone());
						$("#m_img").append($(this).clone());
						$("#bg").show("slow");
					});
					$("#test").append(img);
					
				}
			
			}

			function showImage(i) {
				i = i <= (imageSize + 1) ? i : 1;

				$("#img" + (i - 1)).hide(1000);
				//.css({display:"none"});
				//$("#img"+i).css({display:"block"});
				$("#img" + i).slideDown(700);

				setTimeout(function() {
					showImage(i + 1);
				}, 3500);
			}

			function show() {
				var alpha = $("#alpha");
				alpha.show();
				var m_img = $("#m_img");
				m_img.slideDown("slow");
			}

			function hide() {
				var m_img = $("#m_img");
				m_img.slideUp("slow");
				var alpha = $("#alpha");
				alpha.hide();
			}
			
			function changeXY(m_img, myEvent) {
					if(fx > myEvent.clientX) {
						var change_top_x = parseInt(m_img.css("left")) - (fx - myEvent.clientX);
						//测试是否超出左边窗口
						if(change_top_x < 5) {
							change_top_x = 5;
							//flag = false;
							// title.unbind("mousemove");
						}
						m_img.css("left", change_top_x + "px");
						fx = myEvent.clientX;
					}
					if(fx < myEvent.clientX) {
						var change_top_x = parseInt(m_img.css("left")) + (myEvent.clientX - fx);
						//测试是否超出窗口右边
						if(change_top_x > ($(window).width() - parseInt(m_img.css("width")) - 5)) {
							change_top_x = ($(window).width() - parseInt(m_img.css("width")) - 5);
							//flag = false;
							//title.unbind("mousemove");
						}
						m_img.css("left", change_top_x + "px");
						fx = myEvent.clientX;
					}
					if(fy > myEvent.clientY) {
						var change_top_y = parseInt(m_img.css("top")) - (fy - myEvent.clientY)
						//测试是否超出窗口顶部
						if(change_top_y < 5) {
							change_top_y = 5;
							// flag = false;
							// title.unbind("mousemove");
						}
						m_img.css("top", change_top_y + "px");
						fy = myEvent.clientY;
					}
					if(fy < myEvent.clientY) {
						var change_top_y = parseInt(m_img.css("top")) + (myEvent.clientY - fy);
						//测试是否超出窗口底部
						if(change_top_y > ($(window).height() - parseInt(m_img.css("height")) - 5)) {
							change_top_y = ($(window).height() - parseInt(m_img.css("height")) - 5);
							//flag = false;
							//title.unbind("mousemove");
						}
						m_img.css("top", change_top_y + "px");
						fy = myEvent.clientY;
					}
				}
		</script>
	</head>
	<body>
		<div id="headDiv" class="headDivCss">
			<div id="leftDiv">
			<img src="" />
			</div>
		
			<div id="centerDiv">
				<a href="#">首页</a><a href="#">我的主页</a><a href="#">相册</a><a href="#">我的I贴</a>
			</div>
			<div id="rightDiv">
			<a href="#">消息</a><a href="#">私信</a><a href="#">模版</a><a href="#">退出</a>
			</div>
		</div>
		</div> 
		<div id="bg" class="readImg">
			<div id="m_img"></div>
		</div>
		
		
		<div id="test"></div>
		
	</body>
</html>